<template>
   <el-dialog class="addRole_box" title="添加角色" :visible.sync="dialogVisible" :before-close="close" width="330px">
   		<el-form :model="form" ref="roleDialog" label-position="right" label-width="80px" >
   			<el-form-item 
   				label="角色名称" 
   				prop="formData.rolename" 
   				:rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' },{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }]">
            	<el-input v-model="form.formData.rolename" placeholder="请输入角色名称" class="role_input_style"></el-input>
            </el-form-item>
            <el-form-item 
            	label="所属分组" 
            	prop="formData.rolegroup"
            	:rules="[{ required: true, message: '请选择所属分组', trigger: 'change' }]">
	            <el-select v-model="form.formData.rolegroup" placeholder="请选择所属分组" class="role_input_style">
	               <el-option label="新增加一个分组" :value="0"></el-option>
	               <el-option :label="item.rolegroup" :value="item.rolegroup" v-for="item in params.group"></el-option>
	            </el-select>
          </el-form-item>
          <el-form-item label="分组名称" v-if="form.formData.rolegroup ===0" prop="tempGroupName" :rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' },{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }]">
          	<el-input v-model="form.tempGroupName" placeholder="如:腾讯事业部小组"></el-input>
          </el-form-item>
          <el-form-item label="排序值" prop="formData.orderindex" :rules="[{ required: true, message: '排序不能为空', trigger: 'change' }]">
          	<el-input v-model="form.formData.orderindex" class="role_input_style"></el-input>
          </el-form-item>
          <el-form-item>
		    <el-button type="primary" @click="submitForm">创建</el-button>
		    <el-button @click="close">取消</el-button>
		  </el-form-item>
   		</el-form>
    </el-dialog>
</template>
<script>
 export default {
 	props:["dialogVisible","params","submitFu"],
    data() {
      return {
        form:{
           tempGroupName:'',
           formData:{
	          companyid:this.$store.getters.companyId,
	          orderindex:100,
	          rolermk : '',
	          ctUserid:''
           }
        }
      }
    },
    methods: {
    	close(){
    		this.$emit('update:dialogVisible',false)
    	},
    	submitForm(){
    	  this.$refs["roleDialog"].validate((valid) => {
    	  	if(valid)
    	  	{
    	  		if(this.form.formData.rolegroup===0){
    				this.form.formData.rolegroup = this.form.tempGroupName
    		    }
    	      	this.submitFu(this.form.formData);	
    	  	}
    	  	else
    	  	{
    	  		this.$message.error("拜托，请好好填写信息啦！");
    	  	}
    	  });
    	}
    },
    created(){
      this.form.formData.rolename = this.params.name;
    }
  }
</script>
<style>
.role_input_style input{
  width:210px;
}
</style>
